<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
%>
<html>
<head>
		<title>订单表单页面</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <%--  <link rel="stylesheet" href="<%=path%>/css/lightbox.css" /> --%>
		<link rel="stylesheet" href="<%=path%>/css/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=path%>/css/font-awesome.css" />
        <link rel="stylesheet" href="<%=path%>/css/jquery-ui.css" />
		<link rel="stylesheet" href="<%=path%>/css/icheck/flat/blue.css" />
		<link rel="stylesheet" href="<%=path%>/css/select2.css" />		
		<link rel="stylesheet" href="<%=path%>/css/unicorn.css" />
		<link rel="stylesheet" href="<%=path%>/css/mx.css" />
		<script type="text/javascript" src="<%=path%>/js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="<%=path%>/js/source/jquery.fancybox.js?v=2.1.3"></script>
	<link rel="stylesheet" type="text/css" href="<%=path%>/js/source/jquery.fancybox.css?v=2.1.2" media="screen" />
		<!--[if lt IE 9]>
		<script type="text/javascript" src="js/respond.min.js"></script>
		<![endif]-->
		<%-- <script src="<%=path%>/js/jquery.min.js"></script> --%>
	<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		  ga('create', 'UA-44987299-1', 'bootstrap-hunter.com');
		  ga('send', 'pageview');
		 
		</script>
		<style type="text/css">
		.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}
	</style>
</head>	
<body data-color="grey" class="flat">
		<div id="wrapper">
			<div id="header">
				<h1><a href="<%=path %>/admins/index">宣 臻  管 理</a></h1>	
				<a id="menu-trigger" href="#"><i class="fa fa-bars"></i></a>	
			</div>
		
			<div id="user-nav">
	            <ul class="btn-group">
	            	<li class="btn" ><a title="" href="#"><i class="fa fa-user"></i> <span class="text">${admins.userName}</span></a></li>
	          
	                <li class="btn"><a title="" href="<%=path%>/admins/out"><i class="fa fa-share"></i> <span class="text">登出</span></a></li>
	            </ul>
	        </div>
	       
	       

			<div id="sidebar">
				<div id="search">
					<!-- <input type="text" placeholder="Search here..."/><button type="submit" class="tip-right" title="Search"><i class="fa fa-search"></i></button> -->
				</div>	
				<ul>
					<%--  <li ><a href="<%=path %>/admins/index"><i class="fa fa-home"></i> <span>指示板</span></a></li>  --%>
					<%-- <li ><a href="<%=path%>/user/selectUser"><i class="fa fa-th"></i> <span>接龙用户表单</span></a></li> --%>
					<li class="active"><a href="javascript:void(0);"><i class="fa fa-th"></i> <span>接龙用户表单</span></a></li>
					<li ><a href="javascript:void(0);"><i class="fa fa-th"></i> <span>快闪交友用户表单</span></a></li>
					
				</ul>
			
			</div>
		
		
		
		<div id="content">
			<div id="breadcrumb">
				<a href="#" title="Go to Home" class="tip-bottom"><i class="fa fa-home"></i>管理</a>
				<a href="#" class="current">快闪交友用户表单</a>
			</div>
				<div class="row">
					<div class="col-xs-12">
						
						<div class="widget-box">
							<div class="widget-title">
								<span class="icon">
									<i class="fa fa-th"></i>
								</span>
								<h5>快闪交友用户表单</h5>
							</div>
							<div class="widget-content  nopadding">
								<table class="table table-bordered table-striped table-hover" style="text-align: center;">
									<thead>
									<tr>
								<!-- 	<th><input type="checkbox" id="title-table-checkbox" name="title-table-checkbox" /></th> -->
									<th>序号</th>
									<th>报名用户</th>
									<th>手机号</th>
									<th>性别</th>
									<th>是否注册car2go（Y/N）</th>
									<th>参加时间</th>
						
									</tr>
									</thead>
									<tbody>
										<c:forEach items="${spreadUserList}" var="list" varStatus="s">
											<tr>
												<td>${s.index+1}</td>
												<td>${list.name}</td>
												<td>${list.phone}</td>
												<td><c:if test="${list.gender == 'M'}">男</c:if><c:if test="${list.gender == 'W'}">女</c:if></td>
												<td>${list.member}</td>
												<td class="times">${list.createTime}</td>
											</tr>
										</c:forEach>
									</tbody>
									</table>
									<div class="ym" id="ymm">
									<div class="fy" id="yeshu">共${pageCount }页</div>
									<div class="fy" id="pageDown">→     下一页</div>
										<ul>
										
											<c:forEach var="i" begin="0" end="${pageCount}" step="1">
												<li>${i+1}</li>
											</c:forEach>
									
										</ul>
										<div class="fy" id="pageUp">上一页        ←</div>
									</div>  
							</div>
						</div>
					</div>
				</div>
		</div>
		<div class="row">
			<div id="footer" class="col-xs-12">
				XUANZHEN&nbsp; 2012 - 2013 &copy; Unicorn Admin. Brought to you 
			</div>
		</div>
		
            
            <script src="<%=path%>/js/jquery-ui.custom.js"></script>
            <script src="<%=path%>/js/bootstrap.min.js"></script>
            <script src="<%=path%>/js/jquery.icheck.min.js"></script>
            <script src="<%=path%>/js/select2.min.js"></script>
            <script src="<%=path%>/js/jquery.dataTables.min.js"></script>      
            <script src="<%=path%>/js/jquery.nicescroll.min.js"></script>
            <script src="<%=path%>/js/unicorn.js"></script>
            <script src="<%=path%>/js/unicorn.tables.js"></script>
               <script type="text/javascript">
               (function(global,$){ 
            	   $('.fancybox').fancybox();
	            	 $("td a").css({"display":"block","float":"left","margin":"auto 5px","border":"1px gray solid"}); 
	            	$("td a img").each(
	            	        function(){
	            	        	var s = $(this).attr("src");
	            	        	if(s == "<%=path%>/"){
	            	        		$(this).attr("src","<%=path%>/img/no.jpg");
	            	        		$(this).parent().attr("href","<%=path%>/img/no.jpg");
	            	        	}
	            	        });
	            	$(".times").each(
	            	        function(){
	            	        	var ss = $(this).text().substring(0,16);
	            	        	$(this).text(ss);
	            	        });
	            	
	            	//分页控件
	            	var pageNo = 0;
			    	var pageCount=${pageCount};
			    	function showComment(){
	 			    	$.ajax({  
	 				    	 type: "post",
	 			             url:"<%=path%>/admins/datingNewPage", 
	 			           	 data: {pageNo:pageNo},
	 			             dataType: "json",  
	 			             timeout: 1000,  
	 			             cache: false,  
	 			             error: errorFunction,  //错误执行方法    
	 			             success: successFunction //成功执行方法    
	 			         });
	 			    }
			    	 function errorFunction() {  
			              alert("未能成功查询");
			         }  
			         function successFunction(data) {
			        	 var json=eval(data);
			        	 var html="";
			        	 $.each(json, function (index, item) {  
			                 //循环获取数据   
			                 var s= "<%=path%>";
			                 if(json[index].gender =="W"){
			                	 json[index].gender="女";
			                 }else{
			                	 json[index].gender="男";
			                 }
			                 var record =new Object(); 
			                	 record.id=json[index].id;
			                	 record.name=json[index].name;
			                	 record.phone=json[index].phone;
			                	 record.gender=json[index].gender;
			                	 record.member=json[index].member;
			                	 record.createTime=json[index].createTime;
			                 
 
			                 var plDetailStr="<tr><td>"+record.id+"</td><td>"+record.name+"</td><td>"+record.phone+"</td>";
							 plDetailStr+="<td>"+record.gender+"</td><td>"+record.member+"</td>";
			                 plDetailStr+="</td><td class='times'>"+record.createTime+"</td></tr>";
							 html+=plDetailStr; 
			             });
			        	 $("tbody").html(html);
			            	$(".times").each(
			            	        function(){
			            	        	var ss = $(this).text().substring(0,16);
			            	        	$(this).text(ss);
			            	        });
			         }
					//上一页
					$("#pageUp").click(function(){
						if(pageNo>0){
							pageNo-=1;
							showPageColor();
							hidePageNo();
						}
						showComment();
					});
				    //下一页
					$("#pageDown").click(function(){
						if(pageNo<pageCount){
							pageNo+=1;
							showPageColor();
							hidePageNo();
						}
						showComment();
					});
					showPageColor();
					hidePageNo();
					function showPageColor(){
				    	$("#ymm ul li:eq("+pageNo+")").css('color','#e74c3c');
				    	for(var i=0;i<pageCount+1;i++){
				 			if(i!=pageNo){
				 				$("#ymm ul li:eq("+i+")").css('color','#333');
				 			}
				 		}
				    }
					function hidePageNo(){
						
						for(var i=0;i<pageCount+1;i++){
				 			if(i<pageNo-4 | i>pageNo+4){
				 				$("#ymm ul li:eq("+i+")").css('display','none');
				 			}else{
				 				$("#ymm ul li:eq("+i+")").css('display','');
				 			}
				 			
				 		}
					}
				    //点击到页数
				 	$(".ym ul li").click(function(){
				 		pageNo=this.innerText-1;
				 		showPageColor();
				 		 showComment();
				 		hidePageNo();
				 	});
	            	
	   		 })(window,jQuery);
			</script>
		  <%-- <script src="<%=path%>/js/prototype.js" type="text/javascript"></script> 
			<script src="<%=path%>/js/scriptaculous.js?load=effects" type="text/javascript"></script>
			<script src="<%=path%>/js/lightbox.js" type="text/javascript"></script> --%>
            
	</body>
</html>